<template>
  <div class="ringdiv" style="width: 180px;height: 180px;">
    <div :id="'container' + ringid" style="height: 100%"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import reslist from "../../json/position.js";
import chartmixins from "../../chartmixins.js";

export default {
  props: [],
  mixins: [chartmixins],
  components: {},
  data() {
    return {
      ringid: "dfsdhfghfghfs"
    };
  },
  computed: {},
  watch: {},
  mounted() {
    var dom = document.getElementById("container" + this.ringid);
    var myChart = echarts.init(dom, "dark");
    var app = {};
    let option = null;
    option = {
      backgroundColor: "#5555",
      color: ["#7302F2"],
      title: {
        text: "网络传输模块"
      },
      legend: {
        orient: "horizontal",
        x: "left",
        bottom: 0,
        itemWidth: 10,
        itemHeight: 10,
        //   textStyle:{
        // 	color:'#6ab2ec',
        // },
        data: ["通信正常", "通信异常"],
        formatter: function(name) {
          if (name != "通信正常") {
            return name + "\n    22%";
          } else {
            return name + "\n    78%";
          }
        }
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c} %"
      },
      xAxis: {
        // show: false,
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        type: "category",
        boundaryGap: false,
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
      },
      grid: {
        top: "20%",
        left: "8%",
        right: "8%",
        bottom: "30%",
        containLabel: true
      },
      yAxis: {
        // show: false,
        axisTick: {
          show: false
        },
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          show: false
        },
        type: "value"
      },
      series: [
        {
          name: "通信正常",
          data: [40, 50, 60, 70, 80, 90, 100],
          type: "line",
          smooth: true,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#7302F2" },
                { offset: 0.5, color: "#7302F2" },
                { offset: 1, color: "#0000" }
              ])
            }
          }
        },
        {
          name: "通信异常",
          data: [60, 50, 40, 30, 20, 10, 0],
          type: "line",
          smooth: true,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#7302F2" },
                { offset: 0.5, color: "#7302F2" },
                { offset: 1, color: "#0000" }
              ])
            }
          }
        }
      ]
    };

      option.series[0].data = []
      option.series[1].data = []

    for (let index = 0; index < 7; index++) {
      let tmprad = _.random(80,100)
      option.series[0].data.push(tmprad)
      option.series[1].data.push(100 - tmprad)
    }

    myChart.setOption(option, true);

    this.myChart = myChart;

    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>